<template>
  <div class="home-container">
    <!-- el-row 表示行提供 gutter 属性来指定列之间的间距，其默认值为0。 -->
    <el-row :guteer="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>用户数量</span>
              <el-icon>图标1</el-icon>

            </div>
          </template>
          <div class="card-content">
            <h2>{{ userCount }}</h2>
            <div class="trend">
              <!-- 动态调试css -->
              <span :class="{ 'up': userTrend > 0, 'down': userTrend < 0 }">
                {{ Math.abs(userTrend) }}%
              </span>
              较上月
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>今日访问</span>
            <el-icon>图标2</el-icon>
          </div>
         
        </template>
        <div class="card-content">
          <h2>{{ visitCount }}</h2>
        </div>
      </el-card>
    </el-col>

<el-col :span="6">
  <!-- shadow 是设置边框的阴影 -->
<el-card  shadow="hover">
<template #header>
  <div class="card-header"><span>1111</span>
  <el-icon>图标3</el-icon></div>
</template>

<div>这是内容</div>
</el-card>
</el-col>
<el-row :guteer="20" class="chart-row">
  <el-col :span="12">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>访问趋势</span>
        </div>
      </template>
      <div class="chart-container">访问趋势表</div>
    </el-card>
    
  </el-col>
</el-row>
  </div>
</template>
<script setup>
// 导入开始
import { User, View, Check, Bell, List, DataLine } from '@element-plus/icons-vue';
import { ref } from "vue";
// 导入结束
// 参数导入开始
const userCount = ref(100);
const userTrend = ref(5);
const visitCount = ref(50);
const visitTrend = ref(-2);
const taskCompletionRate = ref(85);
const taskTrend = ref(3);
const messageCount = ref(10);
const messageTrend = ref(0);
// 参数导入结束

</script>
<style scoped>
.home-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.trend {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.trend span {
  margin-right: 5px;
}

.trend .up {
  color: #67c23a;
}

.trend .down {
  color: #f56c6c;
}

.chart-row {
  margin-top: 20px;
}

.chart-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
}

.welcome-card {
  margin-top: 20px;
  text-align: center;
}

.welcome-card h2 {
  margin-bottom: 20px;
}

.feature-list {
  margin-top: 30px;
}

.feature-item {
  padding: 20px;
  text-align: center;
}

.feature-item .el-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.feature-item h3 {
  margin: 10px 0;
  color: #303133;
}

.feature-item p {
  color: #606266;
  font-size: 14px;
}
</style>